<template>
  <div class="header-container">
    <div class="logo">
      <img src="@/assets/vue.svg" alt="Logo" />
      <span v-if="!sidebarCollapsed">{{ $t('app.title') }}</span>
    </div>
    <div class="header-right">
      <el-dropdown @command="handleCommand">
        <el-avatar :size="32" icon="UserFilled" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">{{ $t('header.profile') }}</el-dropdown-item>
            <el-dropdown-item command="theme">{{ $t('header.theme') }}</el-dropdown-item>
            <el-dropdown-item command="language">
              {{ locale === 'zh-CN' ? 'English' : '中文' }}
            </el-dropdown-item>
            <el-dropdown-item command="logout" divided>{{ $t('header.logout') }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user'
import { useConfigStore } from '@/store/modules/config'
import { useI18n } from 'vue-i18n'

const userStore = useUserStore()
const configStore = useConfigStore()
const { locale } = useI18n()
const sidebarCollapsed = computed(() => configStore.sidebarCollapsed)

const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      // 跳转到个人中心
      break
    case 'theme':
      configStore.toggleTheme()
      break
    case 'language':
      configStore.setLocale(locale.value === 'zh-CN' ? 'en' : 'zh-CN')
      locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'
      break
    case 'logout':
      userStore.logout()
      break
  }
}
</script>

<style scoped>
.header-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: var(--el-color-primary);
  color: white;
}
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 32px;
  margin-right: 10px;
}
.header-right {
  display: flex;
  align-items: center;
}
</style>